var geolocation = null;
var ren = null;

function initialize() {
    
    var locations = [
                     ['jounieh', 33.9697, 35.6156],
                     ['hermel', 34.3914, 36.3958],
                     ['zgharta', 34.4000, 35.9000],
                     ['nabatieh', 33.3639, 35.4875],
                     ];
    
    
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
                                  zoom: 7,
                                  center: new google.maps.LatLng(33.9270, 35.6951),
                                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                                  style: google.maps.NavigationControlStyle.SMALL
                                  });
    
    var infowindow = new google.maps.InfoWindow();
    
    var marker, i;
    
    // Place a marker
        
    
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
                                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                        map: map
                                        });
        
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                                                        return function () {
                                                        infowindow.setContent(locations[i][0]);
                                                        infowindow.open(map, marker);
                                                        if (ren && ren.getMap()) ren.setMap(null);
                                                        ren = new google.maps.DirectionsRenderer( {'draggable':false} );
                                                        ren.setMap(map);
                                                        ren.setPanel(document.getElementById("directionsPanel"));
                                                        ser = new google.maps.DirectionsService();
                                                        
                                                        //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT
                                                        ser.route({ 'origin': geolocation.getPosition(), 'destination':  marker.getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
                                                                  if(sts=='OK')ren.setDirections(res);
                                                                  })
                                                        }
                                                        })(marker, i));
    }
    
    // Check if user support geo-location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
                                                 var latitude = position.coords.latitude;
                                                 var longitude = position.coords.longitude;
                                                 var geolocpoint = new google.maps.LatLng(latitude, longitude);
                                                 
                                                 var mapOptions = {
                                                 zoom: 8,
                                                 center: geolocpoint,
                                                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                                                 style: google.maps.NavigationControlStyle.SMALL
                                                 }
                                                 // Place a marker
                                                 geolocation = new google.maps.Marker({
                                                                                      position: geolocpoint,
                                                                                      map: map,
                                                                                      title: 'Your geolocation',
                                                                                      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
                                                                                      });
                                                 });
    } else {
        // Place a marker
        geolocation = new google.maps.Marker({
                                             position: map.getCenter(),
                                             map: map,
                                             title: 'Your geolocation',
                                             icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
                                             });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
